<template>
    <div>
        <van-row @click="login">
            <van-col span="6">
                <van-image :src="avatarImg" width="70px" height="70px" lazy-load round/>
            </van-col>

            <van-col span="14">
                <span>{{ nickname }}</span>

            </van-col>

            <van-col offset="2" span="2">
                <van-icon @click="logout" :name="icon"/>
            </van-col>

        </van-row>

        <van-grid :column-num="3">
            <van-grid-item v-for="(item) in girdArr" clickable :key="item.id" :icon="item.icon" :text="item.type"/>
        </van-grid>

    </div>
</template>

<script>

import avatarSrc from "@/assets/avatar.png";
import {Dialog, Toast} from "vant";


export default {
    name: "User",
    data() {
        return {
            //图片
            avatarImg: avatarSrc,
            nickname: "点击登录",
            icon: "arrow",
            girdArr: [
                {id: 0, icon: "label-o", type: "我的订单"},
                {id: 1, icon: "bill-o", type: "优惠券"},
                {id: 2, icon: "goods-collect-o", type: "礼品卡"},
                {id: 3, icon: "location-o", type: "我的收藏"},
                {id: 4, icon: "flag-o", type: "我的足迹"},
                {id: 5, icon: "contact", type: "会员福利"},
                {id: 6, icon: "aim", type: "地址管理"},
                {id: 7, icon: "warn-o", type: "账号安全"},
                {id: 8, icon: "service-o", type: "联系客服"},
                {id: 9, icon: "question-o", type: "帮助中心"},
                {id: 10, icon: "smile-comment-o", type: "意见反馈"},
            ],
        }
    },
    methods: {
        login() {
            if (localStorage.getItem("token") === null) {
                this.$router.push('/login');
            }
        },
        logout() {
            Dialog.confirm({
                message: '确认退出登录吗',
            })
                .then(() => {
                    localStorage.removeItem("token");
                    localStorage.removeItem("userInfo");
                    Toast("退出登录成功!");
                    this.$router.go(0);
                    // on confirm
                })
                .catch(() => {
                    // on cancel
                });
        }
    },
    mounted() {
        if (localStorage.getItem("userInfo") !== null) {
            const userInfo = localStorage.getItem("userInfo");
            let parse = JSON.parse(userInfo);
            this.nickname = parse.nickname;
            this.avatarImg = parse.avatar;
            this.icon = "cross";
        }
    }

}
</script>

<style scoped lang="less">
.van-row {
    background-color: #595454;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 1rem;
    padding: 0.1rem 0.1rem;

    .van-col {
        color: #efefef;

    }
}

.van-grid-item {
    height: 100px;
}
</style>
